/**
 文 件 名：ListPg
 描    述：对应的列表显示相应电影列表
 项目名称：movie
 作    者：武汉大学国家网络安全学院@沈家强
 发布日期：2018/05/19 8:08
 文件版本：V1.0
 注意：本内容仅限于武汉大学国家网络安全学院陈刚教授团队内部传阅，禁止外泄以及用于其他的商业目
 @Copyright: 2018 www.whu.edu.cn. All rights reserved.
 All rights Reserved, Designed By www.whu.edu.cn
 **/

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  FlatList,
  Text,
  View,
  ActivityIndicator,
} from 'react-native';

//引用外部组件
import ItemComponent from '../components/ItemComponent'
// import movies from '../movies.json'


//默认对应的访问地址
const apiPath = "https://api.douban.com/v2/movie/in_theaters";
//对应返回的 电影数据

export default class ListPg extends Component<Props> {
  //导航首页
  static navigationOptions = {
    headerTitle: '列表页面',
    headerTitleStyle:{
      flex: 1,
      textAlign: 'center',
    },
    header : null,
    // header: {
    //   visible: false,
    // }
  }
  //设置相应的控件对应的信息
  state = {
    //对应的状态主要是是用于状态变化
    s_movies: [],
    s_refreshing: false,
    s_ready: false,
    s_childSate: '',
  }

  //是否有反复刷新
  m_refreshing = false;
  //开始条数
  m_start = 0;
  //每页显示的条目数量
  m_count = 12;

  //抓取数据(设置了默认值)
  //抓取完成之后返回远段的相应的json数据
  fetchData = (start = 0, count = 12) =>{
    //如果不是真实刷新，或系统还未刷新完毕，直接退出
    if(this.m_refreshing){
      return ;
    }
    //如果是真实刷新哪么先设置对应的参数变化
    this.setState({
      s_refreshing: true,
    })
    //设置正在刷新
    this.m_refreshing = true;

    return fetch(`${apiPath}?start=${start}&count=${count}`)
    .then((response) => response.text())
    .then((responseText) => {
      const json = JSON.parse(responseText);
      //完成刷新修改状态
      //如果是真实刷新哪么先设置对应的参数变化
      this.setState({
        s_refreshing: false,
      })
      this.m_refreshing = false;
      return json;
    }).catch((err) => {
      console.error(err);
    });
  }

  //刷新时对应的的方法向远端获取相应的数据
  fetchDataFromRemote = async () =>{
    const json = await this.fetchData();
    console.log(json)
    this.setState({
      s_movies: json.subjects,
    });
  }

  fetchMoreFromRemote = async () =>{
    const json = await this.fetchData(this.m_start, this.m_count);
    //如果获取的有对应的数据，就进行展示，否则不进行展示
    if(json)
    {
      this.m_start = this.m_start + this.m_count;
      this.setState({
        //在已经有的数据当中增加对应新的数据
        s_movies: this.state.s_movies.concat(json.subjects),
      })
    }
  }

  componentWillMount() {
    console.log("==componentWillMount")
  }

  //加载相应的前面rander完成之后，再加载数据
  async componentDidMount() {
    //等待远程数据调取完成
    await this.fetchMoreFromRemote();
    this.setState({
      //数据准备完毕
      s_ready: true,
    })
  }

  render() {
    const {s_movies, s_refreshing, s_ready, s_childSate} = this.state;
    const {navigate} = this.props.navigation;
    return (
        <View>
          <Text>子组件返回信息：{s_childSate}</Text>
          {
            s_ready ?
                <FlatList
                    keyExtractor={item => item.id}
                    style={styles.container}
                    numColumns = {3}
                    data={s_movies}
                    //下拉刷新
                    onRefresh={this.fetchDataFromRemote}
                    onEndReached={this.fetchMoreFromRemote}
                    onEndReachedThreshold={0}
                    refreshing={s_refreshing}
                    ListFooterComponent={() => {
                      return s_refreshing &&
                          <ActivityIndicator size="large" />
                    }}
                    renderItem={({item}) => <ItemComponent
                        title={item.title}
                        image={item.images.medium}
                        stars={item.rating.stars}
                        average={item.rating.average}
                        onPress={() =>navigate('DetailPg',{
                          id: item.id,
                          callback: (data) => {
                            this.setState({
                              s_childSate: data
                            })
                          }
                        })}
                    ></ItemComponent>}
                ></FlatList>
                :
                <ActivityIndicator size="large" />
          }
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 15,
  },
});
